var canvas = document.getElementById('canvas')
var eraser = document.getElementById('eraser')
var pen = document.getElementById('pen')
var lineWidth = 3
var ctx = canvas.getContext('2d')
autoCanvasSize(canvas)

listenToUser(canvas)
var eraserEnabled = false //橡皮擦标识

clear.onclick = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}
pencil.onclick = function penBtn() {
  lineWidth = 3
  eraserEnabled = false
  pencil.classList.add('active') //切换图标颜色
  pen.classList.remove('active')
  brush.classList.remove('active')
  eraser.classList.remove('active')
}
pen.onclick = function penBtn() {
  eraserEnabled = false
  lineWidth = 6
  pen.classList.add('active') //切换图标颜色
  pencil.classList.remove('active')
  brush.classList.remove('active')
  eraser.classList.remove('active')
}
brush.onclick = function penBtn() {
  lineWidth = 9
  eraserEnabled = false
  brush.classList.add('active') //切换图标颜色
  pencil.classList.remove('active')
  pen.classList.remove('active')
  eraser.classList.remove('active')
}
eraser.onclick = function eraserBtn() {
  eraserEnabled = true
  eraser.classList.add('active') //切换图标颜色
  pen.classList.remove('active')
  pencil.classList.remove('active')
  brush.classList.remove('active')
}
black.onclick = function() {
  ctx.strokeStyle = 'black'
  black.classList.add('active') //切换图标颜色
  red.classList.remove('active')
  green.classList.remove('active')
  blue.classList.remove('active')
}
red.onclick = function() {
  ctx.strokeStyle = 'red'
  red.classList.add('active') //切换图标颜色
  green.classList.remove('active')
  blue.classList.remove('active')
  black.classList.remove('active')
}

green.onclick = function() {
  ctx.strokeStyle = 'green'
  green.classList.add('active') //切换图标颜色
  red.classList.remove('active')
  blue.classList.remove('active')
  black.classList.remove('active')
}

blue.onclick = function() {
  ctx.strokeStyle = 'blue'
  blue.classList.add('active') //切换图标颜色
  green.classList.remove('active')
  red.classList.remove('active')
  black.classList.remove('active')
}

download.onclick = function() {
  var a = document.createElement('a')
  a.href = canvas.toDataURL('image/jpg')
  a.download = '我的图片.jpg'
  a.target = '__blank'
  a.click()
}

function drawLine(x1, y1, x2, y2) {
  //划线函数
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineWidth = lineWidth
  ctx.lineTo(x2, y2)
  ctx.stroke()
  ctx.closePath()
}

function autoCanvasSize(canvas) {
  setSize()
  window.onresize = function() {
    setSize()
  }
  function setSize() {
    var pageWidth = document.documentElement.clientWidth
    var pageHeight = document.documentElement.clientHeight
    canvas.width = pageWidth
    canvas.height = pageHeight
  }
}
function listenToUser(canvas) {
  var tag = false //鼠标按下标识
  var position = [] //保存前一次坐标，即起点
  if (document.documentElement.ontouchstart !== undefined) {
    canvas.ontouchstart = function(e) {
      var x = e.touches[0].clientX
      var y = e.touches[0].clientY
      tag = true
      if (eraserEnabled) {
        ctx.clearRect(x - 5, y - 5, 10, 10)
      } else {
        position = [x, y]
      }
    }
    canvas.ontouchmove = function(e) {
      e.preventDefault()
      var x = e.touches[0].clientX
      var y = e.touches[0].clientY
      if (!tag) {
        return
      }
      if (eraserEnabled) {
        ctx.clearRect(x - 5, y - 5, 10, 10)
      } else {
        drawLine(position[0], position[1], x, y)
        position = [x, y] //更新前一次的坐标
      }
    }
    canvas.ontouchend = function(e) {
      tag = false
    }
  } else {
    canvas.onmousedown = function(e) {
      var x = e.clientX
      var y = e.clientY
      tag = true
      if (eraserEnabled) {
        ctx.clearRect(x - 5, y - 5, 10, 10)
      } else {
        position = [x, y]
      }
    }
    canvas.onmousemove = function(e) {
      var x = e.clientX
      var y = e.clientY
      if (!tag) {
        return
      }
      if (eraserEnabled) {
        ctx.clearRect(x - 5, y - 5, 10, 10)
      } else {
        drawLine(position[0], position[1], x, y)
        position = [x, y] //更新前一次的坐标
      }
    }
    canvas.onmouseup = function(e) {
      tag = false
    }
  }
}
